<template>
    <el-dialog
    title="添加商品"
    :visible.sync="dialogAddVisible"
    width="70%"
    :before-close="handleClose">
    <el-form 
    label-width='70px'
    :label-positon="labelPositon"
    :model="addForm"
    ref="ruleForm"
    >
      <el-form-item label="商品类目">
        <span class="category">{{treeData.name}}</span>
        <el-button class="category" type="primary" @click="dialogCategoryVisible=true">类目选择</el-button>
        <el-dialog
          width="50%"
          title="类目选择"
          :visible.sync="dialogCategoryVisible"
          append-to-body>
          <ProductTree @onTree="getTreeData" />
           <span slot="footer" class="dialog-footer">
            <el-button @click="dialogCategoryVisible = false">取 消</el-button>
            <el-button type="primary" @click="getParamsHandle">确 定</el-button>
           </span>
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="addForm.name"></el-input>
      </el-form-item>
      <el-form-item label="商品卖点" prop="sellPoint">
        <el-input v-model="addForm.sellPoint"></el-input>
      </el-form-item>
      <el-form-item label="商品价格" prop="price">
        <el-input v-model="addForm.price"></el-input>
      </el-form-item>
      <el-form-item label="商品数量" prop="num">
        <el-input v-model="addForm.num"></el-input>
      </el-form-item>
      <el-form-item label="上传图片">
        <el-button class="category" type="primary" @click="dialogUploadVisible=true">上传图片</el-button>
        <img class="upload-img" :src="uploadData.url" alt="" />
        <el-dialog
          title="上传图片"
          :visible.sync="dialogUploadVisible"
          width="50%"
          append-to-body
          :before-close="handleClose">
            <ProductUpload @onUpload="getUpload" />
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogUploadVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogUploadVisible = false">确 定</el-button>
          </span>
        </el-dialog>
      </el-form-item>
      <el-form-item label="商品描述">
        <!-- <BaiduUEditor /> -->
        <WangEditor @onEditor="getEditor" />
      </el-form-item>
      <!-- 规格参数 -->
    <div v-for="(item,index) in paramData" :key="index">
      <h3>{{item.value}}</h3>
      <div v-for="(childItem,childIndex) in item.children" :key="childIndex">
        <el-form-item
                        label-width="130px"
                        :label="childItem.childValue"
                    >
                        <el-input
                            v-model="childItem.value"
                            type="text"
                        ></el-input>
                    </el-form-item>
      </div>
    </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogAddVisible = false">取 消</el-button>
      <el-button type="primary" @click="addProductHandle">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import BaiduUEditor from './BaiduUEditor'
import WangEditor from './WangEditor'
import ProductTree from './ProductTree'
import ProductUpload from './ProductUpload'
import api from '../../api'
export default {
  data(){
    return {
      dialogAddVisible:false,//添加对话框
      dialogCategoryVisible:false,//类目选择
      dialogUploadVisible:false,//上传图片
      labelPositon:"left",
      addForm:{
        name:'',
        sellPoint:'',
        price:'',
        num:''
      },
      treeData:{},//tree对象
      uploadData:{},//upload对象
      editorData:'',//editor对象
      paramData:[]//规格参数对象
    }
  },
  components:{
    BaiduUEditor,
    WangEditor,
    ProductTree,
    ProductUpload
  },
  mounted(){
    this.$bus.$on('onAddDialog',flag=>{
      this.dialogAddVisible=flag
    })
  },
  methods:{
    handleClose(done){
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    /* 获取tree的数据 */
    getTreeData(data){
      this.treeData=data
    },
    /* 获取图片 */
    getUpload(data){
      if(data.url){
        data.url=data.url.replace("upload",'http://localhost:3005')
      }
      this.uploadData=data
    },
    /* 获取富文本数据 */
    getEditor(data){
      this.editorData=data
    },
    /* 添加产品 */
    addProductHandle(){
      api.insertTbItem({
        cid:this.treeData.cid,
        title:this.addForm.name,
        sellPoint:this.addForm.sellPoint,
        price:this.addForm.price,
        num:this.addForm.num,
        desc:this.editorData,
        image:this.uploadData.url
      }).then(res=>{
        if(res.data.code===200){
          this.dialogAddVisible=false;
          this.$bus.$emit('onRefresh',true)
        }
      }).catch(err=>{
        console.log(err);
      })
    },
    /* 获取规格参数 */
    getParamsHandle(){
      api.paramsItem({
        cid:this.treeData.cid
      }).then(res=>{
        if(res.data.status===200){
          this.dialogCategoryVisible=false
          this.paramData = JSON.parse(res.data.result[0].paramData);
        }
      }).catch(err=>{
        console.log(err);
      })
    }
  }
}
</script>

<style scoped lang="less">
.category{
  float: left;
  margin-right: 20px;
}
.upload-img{
  width: 100px;
  float: left;
}
</style>